<template>
  <!-- 添加参数对话框 -->
  <el-dialog
    :title="'添加' + titleText"
    :visible="isshowDialog"
    width="30%"
    :before-close="handleClose"
  >
    <el-form
      :model="addForm"
      :rules="addrules"
      ref="ruleForm"
      label-width="100px"
    >
      <el-form-item :label="labelName" prop="attr_name">
        <el-input v-model="addForm.attr_name"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="definePost">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { request } from "@/utils";
export default {
  components: {},
  props: ["isshowDialog", "tabName", "cateId"],
  data() {
    return {
      addForm: {
        attr_name: "",
      },
      addrules: {
        arr_name: [
          { required: true, message: "请输入属性名称", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  watch: {},
  computed: {
    titleText() {
      if (this.tabName == "only") {
        return "静态属性";
      }
      return "动态参数";
    },
    labelName() {
      if (this.tabName == "only") {
        return "属性名称";
      }
      return "参数名称";
    },
  },
  methods: {
    // 关闭对话框事件
    handleClose() {
      this.$emit("closeDialog");
    },
    // 确定发送数据
    async definePost() {
      await request
        .post(`categories/${this.cateId}/attributes`, {
          attr_name: this.addForm.attr_name,
          attr_sel: [this.tabName],
        })
        .then(() => {
          // 重新获取数据，渲染页面
          this.$emit("definePost");
          // 关闭对话框
          this.$emit("closeDialog");
        });
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
</style>